<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>菜单初始化-JavaScript-WSCORE</title>
	<link href="../../theme/style.css" rel="stylesheet" type="text/css" />
	<script src="../../theme/browser.js" type="text/javascript"></script>
</head>
<body>
	<div class="header">
		<ol>
			<li><a href="../../index.html">首页</a></li>
			<li>菜单初始化</li>
		</ol>
	</div>
	<fieldset>
		<legend>按钮初始化</legend>
		文档Document载入完毕后，
		对文档中的菜单初始化；
		<div class="code example">
			<i>jQuery</i> ( <u>selector</u> ) . <b>wscbase_menu</b> ()
		</div>
		<div class="param">
			<strong>selector</strong><br />
			类型：jQuery-Object<br />
			描述：初始化 selector 中的表单			
			<div class="example"><pre>
//#1 全项初始化
<i>jQuery</i> ( '<u>#example</u>' ) . <b>wscbase</b> ()

//#2 仅菜单初始化
<i>jQuery</i> ( '<u>#example</u>' ) . <b>wscbase_menu</b> ()</pre></div>
		</div>
	</fieldset>


	<fieldset>
		<legend>支持属性</legend>
		按钮自动初始化时，可支持下列属性格式化
		<div class="br"></div>
		<table>
			<thead>
				<tr>
					<th>属性名</th>
					<th>属性值</th>
					<th>说明</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>menu</td>
					<td>string</td>
					<td colspan="2">
						必须属性<br />
						格式：效果<br />
						默认：slide<br />
						支持：slide、fade<br />
						注意：只有指定该属性的元素，系列才会以菜单模式解析
					</td>
				</tr>
				<tr>
					<td>data-no-ui</td>
					<td>boolean</td>
					<td>
						禁用UI<br />
						支持：true、false<br />
						默认：false，即自动UI初始化<br />
						注意：当禁用时，菜单的HTML结构需要完成的代码结构<br />
						结构：menu-body、menu-head、menu-list<br />
						比较：true(代码编写量较多、维护难)、false(IE6、7、8速度较慢)
					</td>
					<td>
						<div menu data-no-ui="true">
							<div menu-body>
								<div menu-head>
									Menu-Head
								</div>
								<ul menu-list>
									<li><a href="#">Menu-A</a></li>
									<li><a href="#">Menu-B</a></li>
									<li><a href="#">Menu-C</a></li>
									<li><a href="#">Menu-D</a></li>
								</ul>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>data-click</td>
					<td>boolean</td>
					<td colspan="2">
						点击触发<br />
						支持：true、false<br />
						默认：false，即鼠标经过时触发
					</td>
				</tr>
				<tr>
					<td>data-theme</td>
					<td>[a-z]</td>
					<td>
						菜单样式<br />
						支持：[a-z]任一字符<br />
						默认：a，即A样式<br />
						注意：样式需提前在wscui.css中定义
					</td>
					<td>
						<div menu>
							<a href="#">Menu-A</a>
							<a href="#">Menu-B</a>
							<a href="#">Menu-C</a>
							<a href="#">Menu-D</a>
						</div>
					</td>
				</tr>
				
				
				<tr>
					<td>data-icon</td>
					<td>string</td>
					<td colspan="2">
						附加图标<br />
						格式：图标名称<br />
						支持：plus、minus、up、down等 (<a href="../icon/index.html">详情</a>)
					</td>
				</tr>
				<tr>
					<td>data-icon-checked</td>
					<td>string</td>
					<td colspan="2">
						图标切换<br />
						格式：图标名称(同data-icon)
					</td>
				</tr>
				<tr>
					<td>data-icon-pos</td>
					<td>[l|r]</td>
					<td colspan="2">
						图标位置<br />
						支持：l 或 r<br />
						默认：l, 即Left,左则
					</td>
				</tr>
				<tr>
					<td>data-icon-handle</td>
					<td>boolean</td>
					<td colspan="2">
						图标触发<br />
						支持：true、false<br />
						默认：false，即任意位置激活
					</td>
				</tr>
				<tr>
					<td>data-pos</td>
					<td>[t|l|r|b]</td>
					<td colspan="2">
						菜单位置<br />
						支持：t、l、r、b<br />
						默认：t或b 即上或下
					</td>
				</tr>
				<tr>
					<td>data-margin-top</td>
					<td>int</td>
					<td colspan="2">
						向上偏移<br />
						格式：整数<br />
						默认：0
					</td>
				</tr>
				<tr>
					<td>data-margin-left</td>
					<td>int</td>
					<td colspan="2">
						向左偏移<br />
						格式：整数<br />
						默认：0
					</td>
				</tr>
				<tr>
					<td>data-margin-right</td>
					<td>int</td>
					<td colspan="2">
						向右偏移<br />
						格式：整数<br />
						默认：0
					</td>
				</tr>
				<tr>
					<td>data-margin-bottom</td>
					<td>int</td>
					<td colspan="2">
						向下偏移<br />
						格式：整数<br />
						默认：0
					</td>
				</tr>

			</tbody>
		</table>
	</fieldset>
</body>
</html>